<template>
  <div class="container package-container">
    <Headbar />
    <div class="bgs">
        <!-- <div v-for="(item, index) in 9" :class="'bg'+index"></div> -->
        <div v-for="(item, index) in 9" :class="'bg bg'+index"></div>
    </div>
    <div class="package-main yh-layout-box">
        <div class="privilege-item">
            <div class="privilege-content">
                <div class="privilege-header">
                    <div :class="index == tabActive?'privilege-tab privilege-active':'privilege-tab'" v-for="(i, index) in privilegeList" @click="clickPrivilege(index)">
                        <img v-if="index == tabActive" :src="i.iconActive"/>
                        <img v-else :src="i.icon">
                        <span class="triangle-active triangle-bottom" v-if="index == tabActive"></span>
                    </div>

                </div>
                <div class="privilege-swiper">
                    <div class="scroll-con" v-if="tabActive == 0">
                        <Swiper :data="merchantsImg.online"  />
                    </div>
                    <div class="scroll-con" v-else-if="tabActive == 1">
                        <Swiper :data="merchantsImg.marketing"  />
                    </div>
                    <div class="scroll-con scroll-service" v-else-if="tabActive == 2">
                        <img src="~assets/images/merchants/package/scroll_07.png"/>
                    </div>
                    <div class="scroll-con scroll-push" v-else-if="tabActive == 3">
                        <img src="~assets/images/merchants/package/scroll_08.png"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="user-item">
            <div class="user-header">
                <img src="~assets/images/merchants/package/user_top.png"/>
            </div>
            <div class="user-content">
                <div class="user-wrap">
                    <div class="userLogo-item wow fadeInUp" v-for="(i,index) in userImg" :data-wow-delay="(index+1)*.1+'s'" data-wow-duration=".2s">
                        <img class="userLogo_show" :src="i.userImgUrl">
                    </div>
                </div>

            </div>
        </div>
        <div class="enter-item">
            <div class="enter-title">
                <img src="~assets/images/merchants/package/enter_title.png"/>
            </div>
            <div class="enter-button wow bounceInUp" @click="routeToOut(URL.jumpSeller+'/seller/enter/register?staffId='+staffId+'&isShow='+isShow)">
                <img src="~assets/images/merchants/package/enter_btn.png"/>
            </div>
        </div>

    </div>
    <!-- <div class="fixed-kf-con">
        <div class="fixed-content">
            <img class="default-img" src="../../assets/images/merchants/package/kf_default.png"/>
            <div class="btn-style apply-button" @click="routeToOut(URL.jumpSeller+'/seller/enter/register?staffId='+staffId)">申请入驻</div>
            <div class="btn-style consult-button" @click="clickConsult()">在线咨询</div>
            <div class="contact-tel">020-2895-5112</div>
        </div>
    </div> -->
    <div class="footer-download-item">
        <div class="footer-download-main yh-layout-box">
            <div class="yh-padding-main clearfix">
                <div class="footer-company-msg fl">
                    <div class="footer-company-address clearfix">
                        <div class="address-fl fl">
                            <img src="~assets/images/merchants/pub-ico42.png">
                        </div>
                        <div class="address-fr fl">
                            <p class="companyName-con">广州市一呼百应网络技术股份有限公司</p>
                            <p class="sompanyAddress">广东省广州市科学城彩频路6号</p>
                        </div>
                    </div>
                    <div class="footer-company-tel clearfix">
                        <div class="tel-fl fl">
                            <img src="~assets/images/merchants/pub-ico43.png">
                        </div>
                        <div class="tel-fr fl">
                            <p class="telephoneNum num-one">欧经理：020-28955054 &nbsp; 13729835521</p>
                            <p class="telephoneNum">吕经理：020-28955053 &nbsp; 13929503940</p>
                        </div>
                    </div>
                </div>
                <div class="footer-download-msg fl">
                    <div class="footer-download-left fl">
                        <p class="mobile-down">
                            <!-- 移动端下载 -->
                            扫<br/>描<br/>下<br/>载<br/>A<br/>P<br/>P
                        </p>
                        <!-- <div class="ios-down downloadBtn">
                            <img src="../../assets/images/merchants/pub-ico44.png">
                            IOS下载
                        </div>
                        <div class="android-down downloadBtn">
                            <img src="../../assets/images/merchants/pub-ico45.png">
                            Android下载
                        </div> -->
                    </div>
                    <div class="footer-download-right fl">
                        <img src="~assets/images/merchants/pub-ico46.png"/>
                    </div>
                </div>
                <div class="footer-program fl">
                    <div class="program-text fl">
                        扫<br/>描<br/>小<br/>程<br/>序
                    </div>
                    <div class="program-img fl">
                        <img src="~assets/images/merchants/pub-ico47.png"/>
                    </div>
                </div>
            </div>
            <p class="internet-record"> ©2005-2018 Youboy 粤B2-20120239 粤ICP备09180448号-1 粤公网安备44060402000131号</p>
        </div>
    </div>
    <div class="right-fixed-meau">

      <div class="fixed-item-con">
        <div class="suspend-meau-item program-tab" @mouseover="handleMouseover('wx')" @mouseout="handleMouseout('wx')">
          <div class="tab-ico">
            <img src="~assets/images/merchants/pub-ico36.png"/>
          </div>
          <span class="tab-text">小程序</span>
        </div>
        <div class="fixed-img" :class="{'enter': showWxCode}">
          <img src="~assets/images/merchants/pub-ico39.png"/>
          <div class="tab-tips">微信扫一扫进入</div>
          <div class="tab-tips">一呼百应小程序</div>
        </div>
      </div>
      <div class="fixed-item-con">
        <div class="suspend-meau-item download-tab" @mouseover="handleMouseover('app')" @mouseout="handleMouseout('app')">
          <div class="tab-ico">
            <img src="~assets/images/merchants/pub-ico37.png"/>
          </div>
          <span class="tab-text">APP下载</span>
        </div>
        <div class="fixed-img" :class="{'enter': showAppCode}">
          <img src="~assets/images/merchants/pub-ico40.png"/>
          <div class="tab-tips">微信扫一扫</div>
          <div class="tab-tips">下载一呼百应APP</div>
        </div>
      </div>
      <div class="fixed-item-con">
        <div class="suspend-meau-item online-tab" @mouseover="mouseKefu()" @mouseout="mouseoutKefu()">
          <div class="tab-ico">
            <img src="~assets/images/merchants/pub-ico41.png"/>
          </div>
          <span class="tab-text">在线咨询</span>
        </div>
      </div>
      <div class="fixed-item-con">
        <div class="suspend-meau-item enter-click"  @click="routeToOut(URL.jumpSeller+'/seller/enter/register?staffId='+staffId+'&isShow='+isShow)">
          <div class="tab-ico">
            <img src="~assets/images/merchants/pub-ico35.png"/>
          </div>
          <span class="tab-text">点击入驻</span>
        </div>

      </div>
    </div>
  </div>
</template>
<script>
if (process.browser) {
     var { WOW } = require('wowjs')
     require('wowjs/css/libs/animate.css')
 }
import Swiper from '@/components/Swiper'
import merchantsImg from '@/jsons/merchants-img'
import Headbar from '@/components/Layouts/Headbar'
import config from '@/seo/config'
require('@/utils/service')
export default {
    name: 'package',
    components: {
        Swiper,
        Headbar,
    },
    data() {
        return {
            tabActive: 0,
            merchantsImg: merchantsImg,
            privilegeList:[{
                icon: require('@/assets/images/merchants/package/privilege_01.png'),
                iconActive: require('@/assets/images/merchants/package/privilege_01_active.png')
            },{
                icon: require('@/assets/images/merchants/package/privilege_02.png'),
                iconActive: require('@/assets/images/merchants/package/privilege_02_active.png')
            },{
                icon: require('@/assets/images/merchants/package/privilege_03.png'),
                iconActive: require('@/assets/images/merchants/package/privilege_03_active.png')
            },{
                icon: require('@/assets/images/merchants/package/privilege_04.png'),
                iconActive: require('@/assets/images/merchants/package/privilege_04_active.png')
            }],
            userImg: [
                { userImgUrl: require('@/assets/images/merchants/package/uesr_01.png') },
                { userImgUrl: require('@/assets/images/merchants/package/uesr_02.png') },
                { userImgUrl: require('@/assets/images/merchants/package/uesr_03.png') },
                { userImgUrl: require('@/assets/images/merchants/package/uesr_04.png') },
                { userImgUrl: require('@/assets/images/merchants/package/uesr_05.png') },
                { userImgUrl: require('@/assets/images/merchants/package/uesr_06.png') },
                { userImgUrl: require('@/assets/images/merchants/package/uesr_07.png') },
                { userImgUrl: require('@/assets/images/merchants/package/uesr_08.png') },
                { userImgUrl: require('@/assets/images/merchants/package/uesr_09.png') },
                { userImgUrl: require('@/assets/images/merchants/package/uesr_10.png') },
                { userImgUrl: require('@/assets/images/merchants/package/uesr_11.png') },
                { userImgUrl: require('@/assets/images/merchants/package/uesr_12.png') },
            ],
            showWxCode: false,
            showAppCode: false,
            timer: null,
            staffId: this.getUrlParams('staffId'),
            isShow: this.getUrlParams('isShow'),
            timerKefu: null
        }
    },
    head: config.merchants,
    mounted() {

       if(process.browser){
            new WOW().init({
                offset: 150,
            });
        }
    },
    created() {

    },
    methods: {
        clickPrivilege(index) {
            this.tabActive = index;
        },
        mouseKefu() {
            if(process.browser){
                this.showAppCode = false;
                clearTimeout(this.timerKefu)
                document.querySelectorAll(".nb-icon-wrap")[0].style.display = 'block';
                document.querySelectorAll(".nb-icon-wrap")[0].style.opacity = '1';
            }
        },
        mouseoutKefu() {
            if(process.browser){
              const that = this;
              this.showAppCode = false;
              clearTimeout(this.timerKefu)
              this.timerKefu = setTimeout(() => {
                document.querySelectorAll(".nb-icon-wrap")[0].style.display = 'none';
                document.querySelectorAll(".nb-icon-wrap")[0].style.opacity = '0';
              }, 100)
              document.querySelectorAll(".nb-icon-wrap")[0].onmouseover = function() {
                clearTimeout(that.timerKefu)
                this.style.display = 'block';
                this.style.opacity = '1';
              }
              document.querySelectorAll(".nb-icon-wrap")[0].onmouseout = function() {
                clearTimeout(that.timerKefu)
                this.style.display = 'none';
                this.style.opacity = '0';
              }
            }
        },
        handleMouseover(type) {
            if(type == 'wx'){
                this.showWxCode = true;
                this.showAppCode = false;
            }else{
                this.showAppCode = true;
                this.showWxCode = false;
            }
            clearTimeout(this.timer);
            },
            handleMouseout(type) {
            clearTimeout(this.timer);
            if(type == 'wx'){
                this.timer = setTimeout(() => {
                this.showWxCode = false;
                }, 300)
            }else{
                this.timer = setTimeout(() => {
                this.showAppCode = false;
                }, 300)
            }
        },
    }
}
</script>
<style lang="scss" scoped>
    @import '@/styles/pages/merchants.scss';
    .package-container{
        position: relative;
        background: #fff;
    }
    .bgs{
        overflow: hidden;
        min-width: 1200px;
        position: absolute;
        left: 0;
        top: 40px;
        // height: 2766px;
        height: 2700px;
        width: 100%;
        text-align: center;
        div.bg{
            height: 300px;
            width: 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        // @for $i from 1 to $RedColor {
        //     div:nth-child(#{$i}) {
        //         background-image: url('/assets/images/merchants/package/bg_#{nth($RedColor, $i)}.jpg');
        //     }
        // }
        .bg0{
            background-image: url('../../assets/images/merchants/package/bg_01.jpg');
        }
        .bg1{
            background-image: url('../../assets/images/merchants/package/bg_02.jpg');
        }
        .bg2{
            background-image: url('../../assets/images/merchants/package/bg_03.jpg');
        }
        .bg3{
            background-image: url('../../assets/images/merchants/package/bg_04.jpg');
        }
        .bg4{
            background-image: url('../../assets/images/merchants/package/bg_05.jpg');
        }
        .bg5{
            background-image: url('../../assets/images/merchants/package/bg_06.jpg');
        }
        .bg6{
            background-image: url('../../assets/images/merchants/package/bg_07.jpg');
        }
        .bg7{
            background-image: url('../../assets/images/merchants/package/bg_08.jpg');
        }
        .bg8{
            background-image: url('../../assets/images/merchants/package/bg_09.jpg');
        }


    }
    .package-main{
        position: relative;
        z-index: 2;
        padding-bottom: 36px;
    }
    .privilege-item{
        padding-top: 780px;
        .privilege-content{
            .privilege-header{
                height: 180px;
                overflow: hidden;
                .privilege-tab{
                    width: 300px;
                    height: 150px;
                    float: left;
                    background:linear-gradient(0deg,rgba(246,148,23,1),rgba(244,172,70,1),rgba(246,181,81,1));
                    box-shadow:0px 4px 4px 0px rgba(7,0,2,0.02);
                    text-align: center;
                    position: relative;
                    cursor: pointer;
                    img{
                        margin-top: 30px;
                    }
                    .triangle-active{
                        position: absolute;
                        bottom: -15px;
                        left: 50%;
                        margin-left: -7px;
                        border-right: 15px solid transparent;
                        border-left: 15px solid transparent;
                        border-top: 15px solid #FFD08F;
                    }

                }
                .privilege-active{
                    background: #FFD08F;
                }
            }
            .privilege-swiper{
                height: 700px;
                .scroll-service{
                    text-align: center;
                    img{
                        margin-top: 80px;
                    }
                }
                .scroll-push{
                    text-align: center;
                    margin-left: -25px;
                    img{
                        margin-top: 65px;
                        margin-left: -25px;
                    }
                }
            }
        }
    }

    .user-item{
        .user-header{
            text-align: center;
            margin: 60px 0 40px;
        }
        .user-content{
            width: 1200px;
            height: 490px;
            background: url("../../assets/images/merchants/package/user_bg.png") no-repeat center center;
            background-size: cover;
            .user-wrap{
                width: 1082px;
                height: 400px;
                margin: 0 auto;
                padding-top: 65px;
                .userLogo-item{
                    width: 240px;
                    height: 100px;
                    margin: 15px;
                    float: left;
                    overflow: hidden;
                    .userLogo_show{

                    }
                }
            }

        }
    }
    .enter-item{
        text-align: center;
        .enter-title{
            margin-top: 60px;
        }
        .enter-button{
            margin-top: 20px;
            cursor: pointer;
        }
    }
    .fixed-kf-con{
        width: 253px;
        height: 340px;
        background: url('../../assets/images/merchants/package/kf_bg.png') no-repeat center center;
        position: fixed;
        bottom: 0;
        right: 3%;
        z-index: 3;
        .fixed-content{
            text-align: center;
            .default-img{
                margin: 26px 0 30px;
            }
            .btn-style{
                width: 180px;
                height: 42px;
                line-height: 42px;
                font-size: 20px;
                text-align: center;
                margin: 0 auto;
                cursor: pointer;
            }
            .apply-button{
                color: #fff;
                background:linear-gradient(0deg,rgba(240,72,109,1),rgba(207,21,62,1));
                border-radius: 20px;
            }
            .consult-button{
                color: #A33C37;
                background:linear-gradient(-4deg,rgba(252,222,79,1),rgba(255,225,224,1));
                border-radius: 20px;
                margin: 20px auto 15px;
            }
            .contact-tel{
                font-size: 18px;
                color: #fff;
            }
        }
    }
</style>
<style lang="scss">
#newBridge .icon-right-center{
  top: 50% !important;
  bottom: auto !important;
  right: 90px !important;
  opacity: 0;
  margin-top: -40px !important;
}
.swiper-scroll{
    .el-carousel{
        overflow-x: hidden;
        overflow-y: hidden;
    }
}
</style>
